<template>
	<view class="cart">
		<view class="list">
			<view class="bus-list" v-if="busList.length > 0">
				<view class="item" v-for="(item, index) in busList" :key="index">
					<view class="header" @tap="selectedBus(item)">
						<view class="icon">
							<image :src="item.checked?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
						<view class="bus-name">{{item.seller_name}}</view>
					</view>
					<view class="goods-list">
						<view class="goods" v-for="(goods, goodsIndex) in item.products" :key="goodsIndex">
							<view class="icon" @tap="selected(goods)">
								<image :src="goods.checked?'/static/icon/selected.png':'/static/icon/she.png'"></image>
							</view>
							<view class="image" @tap.stop="toDetail(goods)">
								<image :src="goods.original_image"></image>
							</view>
							<view class="info">
								<view class="goods-name" @tap.stop="toDetail(goods)">{{goods.goods_name}}</view>
								<view class="spec-name" @tap.stop="toDetail(goods)">{{goods.spec_name}}</view>
								<view class="price-number">
									<view class="price">￥{{goods.price}}</view>
									<uni-number-box :bus-index="index" :goods-index="goodsIndex" :min="1" :value="parseInt(goods.number)" :max="parseInt(goods.store_count)" @change="numberChange"></uni-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>你的购物车没有商品</view>
		</view>
		<goods-list title="为你推荐" :goods="recommendGoods" showType=2></goods-list>

		<view class="footer fixed-bottom-btn">
			<view class="icon" @tap="selectAll()">
				<image :src="allStatus?'/static/icon/selected.png':'/static/icon/she.png'"></image>
			</view>
			<view class="price">
				<view class="small text-gary">不含运费</view>
				<view>合计<text class="small text-danger">￥</text><text class="text-danger">{{totalPrice}}</text></view>
			</view>
			<view class="submit" @tap="toConfirm()">结算 ({{totalNumber}})</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list.vue';
	import Request from '../../common/request.js';
	import uniNumberBox from '../../components/uni-number-box.vue';

	export default {
		components: {
			goodsList,
			uniNumberBox
		},
		data() {
			return {
				busList: [],
				recommendGoods: [],
				totalPrice: 0,
				totalNumber: 0,
				allStatus: false
			};
		},
		onShow() {
			this.getData();
		},
		methods: {
			
			getData: function() {
				var that = this;
				var params = {
					url: 'cart/index',
					sCallback: function(res) {
						that.busList = res.data.seller;
						that.recommendGoods = res.data.recommend;
					}
				}
				Request.send(params);
			},
			//更改购买数量
			numberChange: function(e) {
				// this.number = e;
				console.log(e);
				
				// console.log(goods)
				this.busList[e.busIndex]['products'][e.goodsIndex]['number'] = e.val;
				var goods = this.busList[e.busIndex]['products'][e.goodsIndex];
				var that = this;
				that.calculatePrice();
				var url = 'cart/editCart';
				Request.send({
					url: 'cart/editCart',
					data: {
						id: goods.id,
						number: goods.number
					},
					sCallback: function(res) {
						
					}
				})
			},
			//选中单件商品
			selected: function(goods) {
				if (typeof(goods.checked) == 'undefined') {
					this.$set(goods, "checked", true);
				} else {
					goods.checked = !goods.checked;
				}
				this.calculatePrice();
			},

			//选中商家
			selectedBus: function(bus) {
				var status = true;
				if (typeof(bus.checked) == 'undefined') {
					this.$set(bus, "checked", true);
				} else {
					status = !bus.checked;
				}
				bus.checked = status;
				

				var that = this;

				bus.products.forEach(function(goods) {
					that.$set(goods, "checked", status);
				});
				this.calculatePrice();
			},
			//全选
			selectAll: function() {
				var that = this;
				that.allStatus = !that.allStatus;

				that.busList.forEach(function(bus) {
					that.$set(bus, "checked", that.allStatus);
					bus.products.forEach(function(goods) {
						that.$set(goods, "checked", that.allStatus);
					});
				})
				this.calculatePrice();
			},
			//计算价格
			calculatePrice: function() {
				this.totalNumber = 0;
				this.totalPrice = 0;
				var that = this;
				that.busList.forEach(function(bus) {
					if (typeof(bus.checked) == 'undefined') {
						that.$set(bus, "checked", false);
					}
					var proNum = bus.products.length;
					var i = 0;
					bus.products.forEach(function(goods) {
						if (goods.checked) {
							i++;
							that.totalPrice += goods.number * goods.price;
							that.totalNumber += parseInt(goods.number);
						}
					});

					//商家商品数量等于选中数量，更改商家为选中
					if (i == proNum) {
						bus.checked = true;
					} else {
						bus.checked = false;
					}
				})
			},
			//更改数量
			toDetail: function(goods) {
				uni.navigateTo({
					url: '/pages/goods/detail?id='+goods.goods_id
				})
			},

			//确认订单
			toConfirm: function() {
				var ids = [];
				var that = this;
				that.busList.forEach(function(bus) {
					bus.products.forEach(function(goods) {
						if (goods.checked) {
							ids.push(goods.id);
						}
					});
				})
				if (ids.length == 0) {
					Request.alert('请选择要结算的商品');
					return;
				}

				var ids_str = ids.toString();
				uni.navigateTo({
					url: '/pages/order/confirm?type=cart&goods_id=&price_id=&number=&address_id=&active_type=&cart_ids='+ids_str
				})
				
			}
		}
	}
</script>

<style>
	.cart {
		font-size: 28upx;
	}


	.bus-list {
		padding: 15upx;
	}

	.bus-list .item {
		background: #fff;
		width: 100%;
		margin-bottom: 15upx;
	}

	.cart .icon image {
		width: 40upx;
		height: 40upx;
	}

	.bus-list .header {
		display: flex;
		height: 80upx;
		align-items: center;
		padding: 0 10upx;
	}

	.bus-list .header .icon {
		margin-right: 10upx;
		display: flex;
		align-items: center;
	}

	.goods-list {
		/*background: #f5f5f5;*/

	}

	.goods-list .goods {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10upx;
		border-top: 1upx solid #eee;
		border-radius: 10upx;
	}

	.goods-list .goods .icon {
		padding-right: 10upx;
	}

	.goods-list .goods .image image {
		width: 120upx;
		height: 120upx;
	}

	.goods-list .goods .info {
		flex: 1;
		font-size: 24upx;
		padding-left: 16upx;
	}

	.goods-list .goods .info .spec-name {
		color: #999;
		padding: 20upx 0;
	}

	.goods-list .goods .price-number {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.goods-list .goods .price-number .price {
		color: #e60012;
	}

	.footer {
		display: flex;
		flex-direction: row;
		background: #fff;
		color: #272822;
		padding: 0 10upx;
		align-items: center;
	}
	
	/* #ifdef H5 */
	.footer{
		bottom: 45px;
	}
	/* #endif */

	.footer .icon {
		display: flex;
		align-items: center;
	}

	.footer .price {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.footer .small {
		font-size: 20upx;
	}

	.footer .price>view {
		margin-right: 20upx;
	}

	.footer .submit {
		background: #e60012;
		color: #fff;
		padding: 0 60upx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
